<template>
  <div class="w-100">
    <el-table
      v-if="isChildren"
      :data="tabList"
      style="width: 100%"
      border
      stripe
      :show-summary="summary"
      :header-cell-style="{ background: '#e9ecf4', color: '#606266' }"
      row-key="id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <template v-for="(item, index) in tableHead">
        <el-table-column
          v-if="item.label === '序号'"
          :key="index"
          type="index"
          align="center"
          :width="item.width"
          :label="item.label"
        />
        <el-table-column
          v-else
          :key="index"
          align="center"
          :width="item.width"
          :prop="item.key"
          :label="item.label"
        />
      </template>
      <el-table-column v-if="!look && hanlder" label="操作" align="center">
        <template slot-scope="scope">
          <slot v-if="hanlderSlot" name="hanlder" :row="scope.row" />
          <div v-else>
            <el-link
              class="mr-2"
              type="warning"
              :underline="false"
              icon="el-icon-edit"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-link>
            <el-link
              type="danger"
              :underline="false"
              icon="el-icon-delete"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      v-else
      :data="tabList"
      style="width: 100%"
      border
      stripe
      :show-summary="summary"
      :header-cell-style="{ background: '#e9ecf4', color: '#606266' }"
    >
      <template v-for="(item, index) in tableHead">
        <el-table-column
          v-if="item.label === '序号'"
          :key="index"
          type="index"
          align="center"
          :width="item.width"
          :label="item.label"
        />
        <el-table-column
          v-else
          :key="index"
          align="center"
          :width="item.width"
          :prop="item.key"
          :label="item.label"
        />
      </template>
      <el-table-column v-if="!look && hanlder" label="操作" align="center">
        <template slot-scope="scope">
          <slot v-if="hanlderSlot" name="hanlder" :row="scope.row" />
          <div v-else>
            <el-link
              class="mr-2"
              type="warning"
              :underline="false"
              icon="el-icon-edit"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-link>
            <el-link
              type="danger"
              :underline="false"
              icon="el-icon-delete"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    isChildren: {
      type: Boolean,
      default: false
    },
    look: {
      type: Boolean,
      default: true
    },
    hanlder: {
      type: Boolean,
      default: true
    },
    hanlderSlot: {
      type: Boolean,
      default: false
    },
    summary: {
      type: Boolean,
      default: false
    },
    tabList: {
      type: Array,
      default: () => []
    },
    tableHead: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleEdit(index, row) {
      this.$emit('edit', { index, row })
    },
    handleDelete(index, row) {
      this.$emit('delete', { index, row })
    }
  }
}
</script>

<style lang="scss" scoped></style>
